<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../libs/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
		<script src="../libs/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../libs/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="../js/utils.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
		<script src="../js/getGirlsPic.js" type="text/javascript" charset="utf-8"></script>
		
		<link rel="stylesheet" type="text/css" href="../css/girls_my.css"/>
	</head>
	<body>
		<!-- 导航 -->
		<nav class="navbar navbar-default">
		  <div class="container-fluid">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand" href="#">小姐姐信息库</a>
		    </div>
		
		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav">
		        <li class="active"><a href="#">信息展示 <span class="sr-only">(current)</span></a></li>
		        <li><a href="#">其他页面</a></li>
		      </ul>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
		
		<!-- 路径导航 -->
		<ol class="breadcrumb container">
		  <li><a href="#">Home</a></li>
		  <li class="active">Library</li>
		</ol>
		
		<!-- 表格展示所有信息 -->
		<div class="container">
			<table class="table table-striped">
			  <thead>
				<tr>
				  <td>创建时间</td>
				  <td>图片</td>
				  <td>名称</td>
				  <td>详情</td>
				</tr>
			  </thead>
			  <tbody id = 'gPic'>
					
			  </tbody>
			</table>
		</div>
		
		<!-- 默认分页 -->
		<nav aria-label="Page navigation example" id="navPage" class="mid_my">
		    <ul class="pagination">
		        <li class="page-item"><a class="page-link" href="#">Prev</a></li>
		        <li class="page-item"><a class="page-link" href="#">1</a></li>
		        <li class="page-item"><a class="page-link" href="#">2</a></li>
		        <li class="page-item"><a class="page-link" href="#">3</a></li>
		        <li class="page-item"><a class="page-link" href="#">4</a></li>
		        <li class="page-item"><a class="page-link" href="#">5</a></li>
		        <li class="page-item"><a class="page-link" href="#">Next</a></li>
		    </ul>
		</nav>
		
		<script type="text/javascript">
			
			const tb = document.querySelector("#gPic");
			const navPage = document.querySelector("#navPage");
			getInfo();
			
			
			var tag = 0;
			function getInfo(page = 2){
				var str = '';
				var xhr = new XMLHttpRequest()
				xhr.open('get', 'http://api.tianapi.com/meinv/index?key=c0a1a6b042009d5fbe6c3005a3e45c09&page=${page}')
				xhr.send()
				xhr.onreadystatechange = function () {
				  if (xhr.readyState === 4) {
					if (xhr.status === 200) {
					  // 请求成功
					  var newTr = document.createElement("tr");
					  // xhr.responseText接收的是字符串，通过eval转化成json对象格式
					  // var res = eval( "(" + xhr.responseText + ")" );
					  var res = JSON.parse(xhr.responseText)
					  var list = res['newslist'];
					  
					  // console.log(res['newslist'])
					  // console.log(list[0]['ctime'])
					  
					  list.forEach( (item,index) => {
						  // if(index%5 === 0){
							  str += `
							  <tr>
							    <td>${item['ctime']}</td>
							  	<td><img src = "${item['picUrl']}" /></td>
							  	<td>${item['title']}</td>
							  	<td> <a href = "${item['url']}"> 详细信息 </a> </td>
							  </tr>
							  `
						  // }
						  // tag += 5;
					  })
					  tb.innerHTML = str;
					} else {
					  console.log("false");
					}
				  }
				}
			}
			
			
			// 事件委托，点击页数，重新渲染数据
			navPage.addEventListener("click", e => {
				//后面尝试改为includes     伪数组
				if(e.target.className === "page-link"){
					tb.innerHTML = '';
					getInfo(e.target.innerText)
					console.log(e.target.innerText)
				}
			})
			
			
			
			
		</script>
	
		
	</body>
</html>
